/**
 * @description seed-form-input 输入框
 * 在对应的 ts 里 建立 formGroup 添加对应的控制器 control
 * 在html的form表单里需要加上 ngDefaultControl 才能被识别为 form 的 control
 * @author ouxh862
 * @Input() maxLength: number; 输入框最大值
 * @Input() minLength: number; 输入框最小值
 * @Input() title: string; 输入框名称
 * @Input() type: string; 输入框类型
 * @Input() placeholder: string; 输入框类型
 * @Input() defaultValue: string; 默认值
 * @Output() valueChange: EventEmitter<string> 值改变时候事件
 * @Output() onBlur: true 失焦事件
 *
 * 如果需要错误提示，可以在标签里面添加
 * example:
 * html:
 * <seed-form-input [title]="'姓名'"
     [defaultValue]="setBaseDefault('commingName')"
     id="form-name" formControlName="commingName"
     [placeholder]="'请输入真实姓名'" ngDefaultControl >
    <p class="error-tip" *ngIf="!signForm.controls['commingName'].valid">请输入真实姓名</p>
   </seed-form-input>
 */

import {
  Component, Input, OnInit, Output, EventEmitter, ViewEncapsulation} from '@angular/core';
import {FormControl} from "@angular/forms";

@Component({
  selector: 'seed-form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FormInputComponent implements OnInit {
  @Input() maxLength: number;
  @Input() minLength: number;
  @Output() valueChange: EventEmitter<any> = new EventEmitter();
  @Output() onBlur: EventEmitter<any> = new EventEmitter();
  // public value:string | number;
  public value: FormControl = new FormControl('');
  public name: string;
  public _type: string;
  public inputPlaceholder: string;
  public valueHasChange = false;
  public inputBlur = false;

  constructor() {
    this.type = 'text';

  }

  @Input()
  set title(val) {
    this.name = val;
    this.inputPlaceholder = '请输入' + val;
  };

  @Input()
  set type(val) {
    this._type = val;
  };

  get type() {
    return this._type;
  }

  @Input()
  set placeholder(val) {
    this.inputPlaceholder = val;
  };

  @Input()
  set defaultValue(val) {
    this.value.setValue(val);
  }

  get defaultValue() {
    return this.value.value;
  }
  ngOnInit() {
    // this.value.valueChanges.subscribe(() => {
    //   this.valueHasChange = true;
    //   this.valueChange.emit(this.value.value);
    // });
  }

  change() {
    this.valueHasChange = true;
    this.valueChange.emit(this.value.value);
  }

  inputOnBlur() {
    this.inputBlur = true;
    this.onBlur.emit(true);
  }
}

